<template>
    <div class="l72-map">
        <div id="map"></div>
    </div>

</template>

<script setup lang="ts">
import { Scene, PolygonLayer, LineLayer, PointLayer, LayerSwitch, LayerPopup } from '@antv/l7'
import { Mapbox } from '@antv/l7-maps'
import mapboxgl from 'mapbox-gl'


const initMap = () => {
    mapboxgl.accessToken = 'dsadsad'
    const mapbox = new mapboxgl.Map({
        container: 'map',
        style: {
            version: 8,
            sources: {
                m_mono: {
                    type: 'raster',
                    tiles: ['/tile/{z}/{x}/{y}.png'],
                    tileSize: 256,
                    attribution: '',
                },
            },
            // glyphs: '../../static/glyphs/{fontstack}/{range}.pbf',
            layers: [
                {
                    id: 'm_mono',
                    type: 'raster',
                    source: 'm_mono',
                    minzoom: 0,
                    maxzoom: 18,
                },
            ],
        },
        center: [120.15, 30.246], // starting position [lng, lat]
        zoom: 12.5,
        projection: 'globe',
        // pitch: 90
    });
    const scene: Scene | any = new Scene({
        id: 'map',
        map: new Mapbox({
            mapInstance: mapbox,
        }),
        logoVisible: false,
    })

    scene.on('style.load', () => {
        scene.map.setFog({
            color: "rgb(186, 210, 235)",
            "high-color": "rgb(36, 92, 223)",
            "horizon-blend": 0.02,
            "space-color": "rgb(11, 11 ,25)",
            "star-intensity": 0.6,
        });
    })



    scene.on('loaded', async () => {
        console.log('Map loaded')
        await initPathData()


        const lakeLayer = new PolygonLayer({ name: 'lake' })
            .source(_lakeData.value)
            .shape('water').animate(true)
            .color('#006dff')
            .style({
                opacity: 0.4,
                opacityLinear: {
                    enable: true,
                    dir: 'out', // in - out
                },
            });
        const landLayer = new PolygonLayer({ name: 'land' })
            .source(_landData.value)
            .shape('fill')
            .color('#3CB371')
            .style({
                opacity: 0.4,
                opacityLinear: {
                    enable: true,
                    dir: 'in', // in - out
                },
            });

        const lakeBorderLayer = new PolygonLayer({ name: 'lakeBorder' })
            .source(_lakeBorderData.value)
            .shape('fill')
            .color('#ccc')
            .style({
                opacity: 0.5,
                opacityLinear: {
                    enable: true,
                    dir: 'in', // in - out
                },
            });

        scene.addLayer(lakeLayer);
        scene.addLayer(lakeBorderLayer);
        scene.addLayer(landLayer);

        const l2Data = await fetch('/mapjson/lujing2.json').then((res) => res.json())

        for (let obj of l2Data.features) {
            obj.properties.name = 'lujing2' + Math.random()
            // 随机颜色
            obj.properties.color = '#' + Math.floor(Math.random() * 16777215).toString(16)
        }

        const lujing2Layer = new LineLayer({ name: 'lujing2' })
            .source(l2Data)
            .size(3)
            .shape('line')
            .texture('arrow')
            .color('rgb(22,119,255)')
            .animate({
                enable: true,
                interval: 1, // 间隔
                duration: 1, // 持续时间，延时
                trailLength: 2, // 流线长度
            })
            .style({
                opacity: 0.6,
                lineTexture: true, // 开启线的贴图功能
                iconStep: 10, // 设置贴图纹理的间距
                borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
                borderColor: '#fff', // 默认为 #ccc
            });
        scene.addLayer(lujing2Layer);

        const layerPopup = new LayerPopup({
            items: [
                {
                    layer: 'lujing2',
                    title: 'lujing2 title',
                    // customContent: (item) => {
                    //     return item.name + item.color
                    // },
                    fields: [
                        {
                            field: 'name',
                            formatValue: (name?: string) => {
                                return name ?? 'no name'
                            }
                        },
                        {
                            field: 'color',
                            formatValue: (color?: string) => {
                                return color ?? 'no color'
                            }
                        },
                    ],
                }
            ],
            trigger: 'hover',
        })

        scene.addPopup(layerPopup);



        let layerSwitch: LayerSwitch = new LayerSwitch({
            multiple: true,
        });

        scene.addControl(layerSwitch);

    })
}

const _landData = shallowRef([])
const _lakeData = shallowRef([])
const _lakeBorderData = shallowRef([])

const initPathData = async () => {
    const res = await fetch('/mapjson/lujing.json')
    const data = await res.json()
    const { lakeBorderData, lakeData, landData } = data

    _landData.value = landData
    _lakeData.value = lakeData
    _lakeBorderData.value = lakeBorderData


}

onMounted(() => {
    initMap()
})
</script>


<style lang="less" scoped>
.l72-map {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;

    #map {
        height: 100%;
        width: 100%;

    }
}
</style>